<template>
    <div class="newslist">
        <ul class="mui-table-view mui-table-view-chevron">
            <li class="mui-table-view-cell mui-media" v-for="(item, index) in newslist" :key="index">
                <router-link :to="'/home/newsInfo/'+item.id">
                    <img class="mui-media-object mui-pull-left" :src="item.img_url">
                    <div class="mui-media-body">
                        <h3>{{item.title}}</h3>
                        <p class='mui-ellipsis'>
                            <span ref="len" @click="cli()">{{item.add_time | dataForm}}</span>
                            <span>点击：{{item.click}}次</span>
                        </p>
                    </div>
                </router-link>
            </li>
        </ul>

    </div>
</template>
<script>


    export default {
        data() {
            return {
                newslist: [],
            }
        },
        created() {
            this.getNewsList()
        },
        methods: {
            cli() {
                console.log(this.$refs.len.txt);
            },

            getNewsList() {
                this.$http.get("api/getnewslist").then(result => {
                    result = result.body
                    if (result.status === 0) {
                        this.newslist = result.message
                    }
                })
            }
        },



    }
</script>

<style type="text/css" rel="stylesheet/stylus">
    .mui-table-view
    .mui-media
    h3 {
        font-size: 14px;
    }

    p {
        font-size: 12px;
        color: #226aff;
        font-weight: normal;
    }

    .mui-ellipsis {
        display: flex;
        justify-content: space-between;
    }

    .mui-table-view-chevron .mui-table-view-cell {
        padding-right: 40px;
    }
.newslist
    .mui-ellipsis{
    margin-top: 13px;
    }


</style>

